<template>
	<!-- 美食地图 -->
	<!-- :style="'padding-top:' + (Number(topheight) + 5) + 'px;display:block'" -->
	<view class="content" @click.stop="closeall">
		<!-- <img class="xuehua" v-if="Imgroot != ''" :src="Imgroot + 'xue.gif'" style="opacity:0.8" alt="" mode="widthFix"> -->
		<!-- <editmap @changexy="changexy" ref="map"></editmap> -->

		<!-- <img class="backpng" v-if="Imgroot != ''" :src="Imgroot + 'back.png'" mode="widthFix" alt="" @click.stop.stop="gohome">

		<div class="discounts" @click.stop.stop="show = true">
			<img v-if="Imgroot != ''" :src="Imgroot + 'youhui.png'" mode="widthFix" alt="">
			<div class="p">我的优惠券</div>
		</div>

		<van-overlay :lock-scroll="false" :show="show" @click.stop="show = false">
			<div class="wrapper" @click.stop.stop="show = false">
				<div class="white" @click.stop.stop>
					<div class="block">
						<img class="lu" v-if="Imgroot != ''" :src="Imgroot + 'lu.png'" mode="widthFix" alt=""
							@click.stop.stop="gohome">
						<div class="tishi1">恭喜您成功领取优惠券</div>
						<div class="tishi2">您可在首页"我的优惠券"内查看详情 并使用。</div>
						<div class="btn">查看详情</div>
					</div>
				</div>
			</div>
		</van-overlay> -->

		<div class="box" :class="data.list[nowid].show ? 'showop1' : 'showop2'" v-if="centerdd" @click.stop>
			<div class="imgs">
				<img :src="centerdd.background" alt="">
			</div>
			<div class="top" style="margin-top: 10px;overflow: hidden">
				<div style="float:left ;font-size:25px;">
					{{ centerdd.title }}
				</div>
				<div style="float:right ;">可用
					<div class="yuanquan" :class="'img' + centerdd.status">

					</div>

				</div>
			</div>
			<div class="p1">{{ centerdd.address }}</div>
			<div class="p1">尺寸：{{ centerdd.size_text }}</div>
			<div class="p1">数量：{{ centerdd.number }}</div>
			<div class="btntt" @click.stop="concat">联系方式

			</div>
		</div>

		<movable-area scale-area class="movable-area" v-if="data"
			:style="'width:' + data.big_background_width + 'rpx;' + 'height:' + data.big_background_height + 'rpx'">
			<movable-view @change="change" inertia="true" @scale="scale" class="movable-view" direction="all" scale="true"
				scale-max="4" :scale-value="scale" @dblclick="dblclick">
				<div class="theboxs">
					<img ref="myElement" style="width:100%;" class="imgbox imgg" :src="data.big_background"
						mode="widthFix" />
					<div class="point" :class="'img' + item.status" v-for="(item, index) in  data.list"
						:style="'position:absolute;left:' + item.x + 'rpx;' + 'top:' + item.y + 'rpx;' + (item.show ? 'z-index:99999' : '')"
						@click.stop="showxinxi(index)">
						<img v-if="item.show" class="weizhi" src="/static/images/weizhi.png" />
						<!-- <uni-tooltip content="示例文字" placement="top">
							<div class="xinxi" v-if="item.show">
								<div class="div1">{{ item.title }}</div>
								<div class="div2">尺寸：{{ item.size_text }}</div>
								<div class="div3">
									<div class="number" style="margin-left:3px">数量：{{ item.number }}个</div>
									<div class="zt">
										状态:
									</div>
									<div class="yuanquan" :class="'img' + item.status">

									</div>
									<div class="points">{{ item.status == 0 ? '可用' : (item.status == 1 ? '恰谈中'
										: '已签约') }}</div>
								</div>
							</div>
						</uni-tooltip> -->

					</div>
				</div>
			</movable-view>
		</movable-area>


	</view>
</template>

<script>
// import snowflake from "./comm/snowflake";
import { getmapdetail } from '@/api/api.js'
// import editmap from "./editmap";
export default {
	data() {
		return {
			map_id: "",
			topheight: 0,
			title: "Hello",
			show: false,
			data: null,
			scale: 1,
			centerdd: {},
			nowid: 0,
		};
	},
	// components: { editmap },
	mounted() {
	},
	created() {
		this.topheight = uni.getStorageSync("navBarHeight");
	},
	onLoad: function (options) {

		// 原始地图 宽 1920  高1080
		// 现在地图 宽 1500   高？
		// 1920乘以 ==1080
		console.log(options)
		this.map_id = options.map_id
		this.godetail()
		setTimeout(() => {
			this.getElementHeight()
		}, 100);

	},
	methods: {
		concat() {
			//去联系按钮
		},
		closeall() {
			this.data.list[this.nowid].show = false

			this.$forceUpdate()
		},
		showxinxi(index) {
			this.nowid = index
			if (this.data.list[index].show) {
				this.data.list[index].show = false
			}
			else {
				this.data.list = this.data.list.map(item => {
					item.show = false
					return item
				})

				this.data.list[index].show = !this.data.list[index].show
				this.showbottom = true
			}
			this.centerdd = this.data.list[this.nowid]
			console.log(this.centerdd)
			this.$forceUpdate()
		},
		getElementHeight() {
			// let query = wx.createSelectorQuery();
			// query.select('.imgg').boundingClientRect(res => {
			// 	console.log(res.height);   // 1545.7249755859375
			// }).exec();

			// let info = uni.createSelectorQuery().select(".imgg");
			// info.boundingClientRect(function (data) { //data - 各种参数
			// 	console.log(data.width)  // 获取元素宽度
			// }).exec()


			// uni.createSelectorQuery().in(this).select(".imgg").boundingClientRect(data => {
			// 	console.log(JSON.stringify(data))
			// 	// {"id":"","dataset":{},"left":12,"right":308,"top":12,"bottom":315,"width":296,"height":303}
			// 	console.log(data.width)  // 获取元素宽度
			// }).exec()

			const element = this.$refs.myElement;
			console.log(this.$refs)
			if (element) {
				const height = element.style.height; // 获取的是CSS样式中的高度，如果是动态高度，则需要使用其他方法
				const rect = element.getBoundingClientRect(); // 使用getBoundingClientRect获取实际高度和位置
				console.log('Element height:', rect.height); // 输出实际高度
			}
		},
		godetail() {
			getmapdetail({
				map_id: this.map_id
			}).then(result => {
				console.log(result)
				// if (result.code) {
				this.data = result.data
				this.data.list = this.data.list.map(item => {
					item.show = false
					return item
				})
				// 	console.log(this.data)
				// }
			})
		},
		gohome() {
			uni.navigateBack({
				delta: 1
			});
		},
		touchend(e) { }
	}
};
</script>

<style scoped lang="scss">
.weizhi {
	position: absolute;
	left: -5px;
	bottom: 20px;
	height: 26px;
	width: 26px;
	display: block;
}

// .showop3 {
// 	bottom: -300px;
// }

.p1 {
	font-size: 13px;
	margin-top: 5px;
}

.btntt {
	width: 100%;
	height: 45px;
	line-height: 45px;
	border-radius: 9px;
	background: #0790ba;
	text-align: center;
	color: white;
	margin-bottom: 20px;
	margin: 0 auto;
	margin-top: 20px;

}

.imgs {
	width: 100%;
	margin: 0 auto;
	height: 200px;
	border-radius: 18px;
	overflow: hidden;
}

.imgs img {
	width: 100%;
}

.number {
	float: left;
}

.zt {
	float: left;
	margin-left: 10px;
}

.points {
	float: left;
}

.xinxi {
	position: absolute;
	bottom: 20px;
	height: auto;
	width: 181px;
	padding: 12px;
	background: rgba(0, 0, 0, 0.6);
	color: white;
	border-radius: 8px;
	margin-left: -73px;
	z-index: 99999999;
}

.p1 {
	font-size: 17px;
	color: rgb(122, 122, 122);
}

.p2 {
	font-size: 12px;
	margin-top: 10px;

}

.div3 {
	font-size: 12px;
	margin-top: 10px;

}

.div1 {
	font-size: 17px;

}

.div2 {
	font-size: 12px;
	margin-top: 10px;

}

.div3 {
	font-size: 12px;
	margin-top: 10px;

}


.yuanquan {
	width: 14px;
	height: 14px;
	float: left;
	border-radius: 50%;
	margin-left: 8px;
	margin-right: 5px;
	margin-top: 2px;
	box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);
}

.point {
	width: 16px;
	height: 16px;
	transform: translate(-15px, -15px);
	border-radius: 50%;
	border: solid 3px rgb(233, 233, 233);
	box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);
}

.img0 {
	background: rgb(7, 193, 96);
}

.img1 {
	background: rgb(245, 205, 6);
}

.img2 {
	background: rgb(193, 22, 7);
}

.movable-view {
	width: 100%;
	height: 100%;
	justify-content: center;
	/*子元素水平居中*/
	align-items: center;
	/*子元素垂直居中*/
	display: -webkit-flex;
}

.movable-area {
	width: 100%;
	height: 100vh;
}

.address {
	image {
		width: 35rpx !important;
		display: block;
		height: 35rpx !important;
		margin: 0 auto;
	}

	p {
		font-size: 20rpx;
		color: white;
		background: rgba(61, 178, 288, 0.7);
		padding: 7rpx 14rpx;
		border-radius: 9rpx;
	}
}

.theboxs {
	width: 100%;
	position: relative;
}

.box {
	background: white;
	padding: 20px;
	height: auto;
	left: 20px;
	right: 20px;
	margin: 0 auto;
	position: fixed;
	bottom: 20px;
	border-radius: 15px;
	z-index: 999999;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
	transition: all 0.4s;
}

.showop2 {
	transition: all 0.8s;
	bottom: -452px;
}


.btn {
	width: 400rpx;
	height: 68rpx;
	background: #00a879;
	border-radius: 34rpx;
	margin: 0 auto;
	margin-top: 40rpx;
	font-size: 28rpx;
	line-height: 68rpx;
	color: white;
	text-align: center;
}

.tishi1 {
	font-size: 30rpx;
	font-family: PingFang SC;
	color: #333333;
	line-height: 30rpx;
	text-align: center;
	padding-top: 69rpx;
}

.tishi2 {
	width: 448rpx;
	height: 67rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	color: #666666;
	line-height: 40rpx;
	text-align: left;
	margin: 0 auto;
	margin-top: 27rpx;
}

.wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.lu {
	width: 406rpx;
	height: 179rpx;
	position: absolute;
	top: -149rpx;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.block {
	width: 600rpx;
	height: 340rpx;
	background-color: #fff;
	position: relative;
	border-radius: 20rpx;
}

.movable-area {
	position: fixed;
	z-index: 99999;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
}

.movable-view {
	// width: 100vw;
	height: 90vh;
	justify-content: center;
	/*子元素水平居中*/
	align-items: center;
	/*子元素垂直居中*/
	display: -webkit-flex;
}

.swiperImg {
	height: 80%;
}

.discounts {
	position: fixed;
	bottom: 45rpx;
	right: 0rpx;
	width: 199rpx;

	img {
		width: 199rpx;
		height: 81.675rpx;
		display: block;
	}

	.p {
		color: #ffa430;
		margin: 0;
		text-align: center;
		font-size: 24rpx;
		margin-top: 14rpx;
	}
}

.backpng {
	position: fixed;
	width: 219rpx;
	bottom: 45rpx;
	height: 39.0928px;
}

.postions {
	position: fixed;
	width: 100%;
	height: 100vh;
}

.xuehua {
	position: fixed;
	width: 100%;
}

.content {
	width: 100%;
	min-height: 100vh;
	padding-top: 130rpx;
	box-sizing: border-box;
	background: linear-gradient(#78d898, #269e9f, #40b4ee);
}

.title {
	display: block;
	margin: 0 auto;
	width: 700rpx;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
</style>
